<template>
  <div class="brokerage">
    <Row :gutter="50">
      <Col span="8" v-for="item in flowData" :key="item.id">
      <div class="rect-area">
        <img :src="item.imgUrl" class="flow-img" alt="">
        <div class="title">{{ item.subTitle }}</div>
        <div class="desc">{{ item.desc }}</div>
      </div>
      </Col>
    </Row>
  </div>
</template>
<script>

export default {
  props: {
    flowData: Array
  },
  data() {
    return {

    }
  },
}
</script>
<style lang="less" scoped>
.brokerage {
  font-family: Open Sans, Open Sans;
  margin-top: 32px;

  .rect-area {
    min-height: 228px;
    // max-height: 328px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    border: 1px solid #E8E8E8;
    padding: 32px 40px;

    .flow-img {
      width: 50px;
      height: 50px;
    }

    .title {
      font-weight: 600;
      font-size: 22px;
      color: #1E1714;
      line-height: 26px;
      margin-top: 4px;
    }

    .desc {
      height: 75px;
      font-weight: 400;
      font-size: 16px;
      color: #767B93;
      line-height: 19px;
      margin-top: 8px;
    }
  }
}
</style>
